<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片轮播</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://cdn.bootcss.com/holder/2.9.6/holder.js"></script>
<style>
  img{
      border: none; vertical-align: top;
  }
  #box{
      width:400px;height:200px;position: relative;
      margin: 30px auto;overflow: hidden;
  }
  ul{
      width: 400px;position: absolute;left: 0; top: 0;z-index: 1;
  }
  ul li{
      width: 400px;display: none;
  }
  ol{
      z-index: 2;width: 120px;position: absolute;right: 10px;bottom: 10px;
  }
  ol li{
      width: 20px; height: 20px; line-height: 20px; 
      float: left; margin: 0 2px; display: inline;
      background-color: #fff;color: #f60;
      text-align: center;}
  ol .active{
      background: #f60;color: #fff;
  }
</style>
<script type="text/javascript">
window.onload=function(){
    var oUl=document.getElementsByTagName('ul')[0];
    var aLiUl=oUl.getElementsByTagName('li');
    var oOl=document.getElementsByTagName('ol')[0];
    var aLiOl=oOl.getElementsByTagName('li');
    for(var i=0;i<aLiOl.length;i++){
        aLiOl[i].index=i;
        aLiOl[i].onmousemove=function(){
            for(var i=0;i<aLiOl.length;i++){
                aLiOl[i].className=' ';
                aLiUl[i].style.display='none';
            }
            this.className='active';
            aLiUl[this.index].style.display='block';
        }
    }
}
</script>    

</head>
<body id="box">
    <ul>
        <li style="display:block"><img src="holder.js/400x200?theme=sky" alt=""></li>
        <li><img src="holder.js/400x200?bg=#f00" alt=""></li>
        <li><img src="holder.js/400x200?bg=#0ff" alt=""></li>
        <li><img src="holder.js/400x200?bg=#00f" alt=""></li>
        <li><img src="holder.js/400x200?bg=#ff0" alt=""></li>
    </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</body>
</html>